
/*
 * @Descripttion: 自由落体小球帧动画
 * @version: 
 * @Author: ldh
 * @Date: 2020-06-07 10:58:56
 * @LastEditors: ldh
 * @LastEditTime: 2020-06-09 22:53:24
 */ 
// pages/animateCart/animateCart.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    ball:{
      left:1000,
      top:-100,
    },
    ball2:{
      left:1000,
      top:-100,
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getSystemInfo({
      success: (result) => {
        this.windowHeight = result.windowHeight
      },
    });
      
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 添加到购物车
   */
  addToCart(e){
    const{index} = e.currentTarget.dataset
    this.selQuery = wx.createSelectorQuery();
    this.selQuery.selectAll('.add').boundingClientRect((res)=>{
      //购物车位置
      let cart = {
        x:50,
        top:600,
      }
      // 自由落体小球动画帧
      this.animate(res[index],cart)
      // 二次贝塞尔曲线 动画帧
      this.selectComponent('#animate-ball').animate(
        {x:res[index].left,y:res[index].top},
        {x:cart.x,y:cart.top}
      )
    }).exec()
  },
  /**
   * @method: 小球帧动画
   * @param {Object} sPoint 初始位置 
   * @param {Object} ePoint 结束位置
   * @var {Number} delay 定时器延时
   */
  animate(sPoint,ePoint){
    // 初始化小球位置
      this.setData({
        'ball.left':sPoint.left,
        'ball.top':sPoint.top
      })
    let delay = 20 // 定时器延时
    this.freeFall(sPoint,ePoint).then(points=>{
      console.log(points)
      let i = 0 ,length = points.length;
      // x轴速度 匀速运动
      let vx = (sPoint.left - ePoint.x) / length 
      let left = sPoint.left
      this.animation = setInterval(() => {
        left -= vx
        this.setData({
          'ball.left':parseInt(left),
          'ball.top':points[i]
        })
        i++
        if(i === length) {
          clearInterval(this.animation)
            // 隐藏 小球
            this.setData({
              'ball.left':1000,
              'ball.top': -100,
            }) 
        }
      }, delay);
    })
  },
  /**
   * 模拟自由落体
   * @param {Object} startPoint 初始坐标
   * @param {Object} endPoint 结束坐标
   * @const {Number} cy 系数
   * @const {Number} g 重力加速度
   * @const {Number} _vy 初始速度
   * @var {Number} y 初始高度
   * @var {Array} yPoints 记录自由落体到 结束点高度集合
   * @var {Number} vy 自由落体速度
   * @return: 
   */
  freeFall(startPoint,endPoint){
     const cy = 1/2,g = 0.8,_vy = -7;
     let y = startPoint.top,yPoints = [], vy = _vy;
     clearInterval(this.interval)
    return new Promise(resolve=>{
      // 先计算一次 抛物过程 到 结束点 取到的 y坐标集合
      this.interval = setInterval(() => {
        y += vy
        if(y >= endPoint.top){
          y = endPoint.top
          yPoints.push(parseInt(y))
          clearInterval(this.interval)
          return resolve(yPoints)
        } 
        yPoints.push(parseInt(y))
        vy += Math.abs(vy)*g*cy
        if(vy > -2 ){ // 向上抛 减速到一定速度 改为向下自由落体
          vy = Math.abs(vy)
        }
        if(vy>50) vy = 50 // 设置 最大速度
      }, 0);
    })
  },
})